<template>
  <div class="customCard"  @click="handleFold">
    <!-- 默认展示区域 -->
    <slot name="default"></slot>
    <!-- 折叠区域 -->
    <el-collapse-transition>
      <div v-show="foldShow">
        <slot name="fold"></slot>
      </div>
    </el-collapse-transition>
    <i :class="['el-icon-arrow-down', !foldShow ? 'openIcon': 'closeIcon']"  @click.stop="handleFold"></i>
  </div>
</template>
<script>
export default {
  name: 'customCard',
  props: {
    // 是否折叠
    value: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value(val) {
      this.foldShow = val
    },
  },
  data() {
    return {
      foldShow: this.value,
    }
  },
  mounted() {},
  methods: {
    handleFold() {
      this.foldShow = !this.foldShow
      this.$emit('input', this.foldShow)
    },
  },
}
</script>
<style lang="less" scoped>
.customCard{
  position: relative;
  .el-icon-arrow-down{
    cursor: pointer;
    position: absolute;
    right: 10px;
    bottom: 0px;
  }
  .openIcon{
    transform: rotate(0deg);
    transition: all 0.3s;
  }
  .closeIcon{
    transform: rotate(180deg);
    transition: all 0.3s;
  }
}

</style>